<template>
	<EChart :id="id"  :class="className" :options="options" >

	</EChart>

</template>
<script>
	import EChart from './EChart'
	export default {
		props: ['xData','yData','title','id'],
		components: {
	      EChart
	    },
		data() {
			return {
				className:'',
				options: {}
			}
		},
		watch:{
	        yData:{//深度监听，可监听到对象、数组的变化
	            handler(val, oldVal){
	           		this.initOption()
	            },
	            deep:true
	        },
	        xData:{//深度监听，可监听到对象、数组的变化
	            handler(val, oldVal){
	           		this.initOption()
	            },
	            deep:true
	        },
	        title:{//深度监听，可监听到对象、数组的变化
	            handler(val, oldVal){
	           		this.initOption()
	            },
	            deep:true
	        }
	    },
		created:function(){

			this.initOption()


		},
		mounted: function(){

	    },
	    methods: {
	    	initOption() {
	    		this.options = {
			 	 tooltip : {
			        trigger: 'axis',
			        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
			            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
			        }
			    },

			    title: {
			        text: this.title,
			        x:'center'
			    },
			    xAxis: {
			        type: 'category',
			        data: this.xData
			    },
			    yAxis: {
			        type: 'value'
			    },
			    series: [{
			        data: this.yData,
			        type: 'bar',
			        smooth: true
			    }]
			};
	    	}
	    }


	}

</script>

